<template>
	<view>
		<view class="top" :style="{marginTop:height}">
			<view class="u-flex u-flex-y-center" @click="show=true">
				<image src="/static/home/Vector.png" class="top__icon" mode=""></image>
				{{addrdetial?addrdetial:'未知'}}
				<u-icon name="play-right-fill" color="#575757" size="14rpx"></u-icon>
			</view>
		</view>
		<scroll-view v-if="iskt" scroll-y="true"
			:style="{height:'calc(100vh - 88rpx - 95.42rpx - '+height+' - '+bheight+')'}"
			@scrolltolower='scrolltolower1'>
			<view class="con">
				<u-swiper :list="list1" circular keyName='image' height="326.34rpx" radius='38rpx'
					bgColor="#D3D0D0"></u-swiper>
				<view class="con__not" @click="navto('/pages/home/notice')">
					<u-notice-bar bgColor="transparent" mode='link' fontSize='22rpx' color='#000000' :text="text1"
						direction='column'></u-notice-bar>
				</view>
				<view class="con__box">
					<view class="con__box__item" v-for="(item,index) in list" :key="index">
						<image :src="URL(item.icon)" class="con__box__item__icon" mode="aspectFill"></image>
						<view class="con__box__item__text">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="con__box1">
					<view class="u-flex u-flex-y-center u-flex-between">
						<view class="con__box1__tab" v-for="(item,index) in tablist1" :key="index"
							@click="navto('/pages/home/hot?type='+item.type+'&curindex='+index)">
							<view class="con__box1__tab__name">
								{{item.name}}
							</view>
							<view class="con__box1__tab__tip">
								{{item.tip}}
							</view>
							<image src="/static/home/more.png" class="con__box1__tab__more" mode=""></image>
							<image :src="'/static/home/'+item.icon+'@2x.png'" class="con__box1__tab__bg" mode="">
							</image>
						</view>
					</view>
					<u-sticky bgColor="#fff" offsetTop="0" customNavHeight="0">
						<view class="con__box1__title">
							热门资讯
						</view>
						<scroll-view scroll-x="true" style="width: 662rpx;">
							<view class="u-flex u-flex-y-center">
								<view class="con__box1__sx" :class="curtab==index?'active':''"
									v-for="(item,index) in tablist" :key="index" @click="clicknewstype(item,index)">
									{{item.title}}
								</view>
							</view>
						</scroll-view>
					</u-sticky>
					<view class="con__box1__list">
						<view class="con__box1__list__item u-flex u-flex-between" v-for="(item,index) in newslist"
							:key="index">
							<view class="">
								<view class="con__box1__list__item__text u-line-2">
									{{item.title}}
								</view>
								<view class="u-flex u-flex-y-center u-flex-between">
									<view class="con__box1__list__item__time">
										{{$u.timeFormat(item.created_at, 'yyyy.mm.dd')}}
									</view>
									<image src="/static/home/eye.png" class="con__box1__list__item__eye" mode="">
									</image>
									<view class="con__box1__list__item__num">
										{{item.view_number}}
									</view>
								</view>
							</view>
							<image :src="URL(item.images)" class="con__box1__list__item__pic" mode="aspectFill">
							</image>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
			</view>
		</scroll-view>
		<view class="" style="background-color: #f3f4f6;display: flex;align-items: center;justify-content: center;"
			:style="{height:'calc(100vh - 88rpx - 95.42rpx - '+height+' - '+bheight+')'}" v-else>
			<u-empty mode='history' text='当前选择区域暂未开通,可联系客服开放'>
				<!-- <u-button type="primary"></u-button> -->
			</u-empty>
		</view>

		<!-- 城市选择弹框 -->
		<u-popup mode="bottom" round="57rpx" :show-scrollbar='true' :safeAreaInsetBottom='false' :show="show"
			bgColor='transparent' @open="open" @close="close">
			<view class="popbox">
				<view class="popbox__title">
					选择地区
				</view>
				<view class="popbox__title1">
					省份
				</view>
				<view class="popbox__list">
					<view class="popbox__item" v-for="(item,index) in sflist" :key="index"
						:class="cursf==index?'active':''" @click="cursf=index">
						{{item.province}}
					</view>
				</view>
				<view class="popbox__title1" style="margin-top: 36rpx;">
					城市
				</view>
				<view class="popbox__list" v-if="cursf!=null">
					<view class="popbox__item" :class="item.cur?'active':''" v-for="(item,index) in sflist[cursf].child"
						:key="index" @click="clickcity(item,index)">
						{{item.city}}
					</view>
				</view>
				<view class="u-flex u-flex-center" style="padding-bottom: 19rpx;margin-top: 50rpx;">
					<u-button :customStyle="{
						height:'76',
						fontSize:'30rpx',
						width:'578rpx',
						color:'#00456A',
						margin:'0',
					}" color="#93d8ff" shape='circle' @click="submitcity">确认</u-button>
				</view>
			</view>
		</u-popup>
		<tabbar :current="0"></tabbar>
	</view>
</template>

<script>
	import home from '@/api/_home.js'
	export default {
		data() {
			return {
				iskt: true,
				list1: [],
				show: false,
				tablist1: [{
						name: '热门学校',
						icon: 3,
						tip: '这里是副标题',
						type: 'schoollist'
					},
					{
						name: '热门专业',
						icon: 2,
						tip: '这里是副标题',
						type: 'majorlist'
					},
				],
				text1: [],
				addr: '',
				addrdetial: '正在获取地址',
				list: [],
				tablist: [],
				curtab: 0,
				status: 'loadmore',
				newslist: [],
				page1: 1,
				page_size1: 10,
				total1: 0,
				type_id: '',
				sflist: [],
				cursf: null,
				curcity: null,
				sf: '',
				city: '',
				loading: true
			};
		},
		computed: {
			height() {
				const height = `calc(${uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px')})`
				return uni.$u.deepMerge(height)
			},
			bheight() {
				const height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
				return uni.$u.deepMerge(height)
			},
		},
		onLoad() {
			uni.hideTabBar()
			// this.getaddr()
			this.addrdetial = uni.getStorageSync('schooladdr')
		},
		methods: {
			clickcity(item, index) {
				this.sflist.map(t => {
					t.child.map(t1 => {
						t1.cur = false
					})
				})
				item.cur = true
				this.curcity = index
				this.$forceUpdate()
			},
			clicknewstype(item, index) {
				this.curtab = index
				this.page1 = 1
				this.page_size1 = 10
				this.newslist = []
				this.total1 = 0
				this.status = 'loadmore'
				this.type_id = item.id
				this.getnewslist()
			},
			open() {
				this.getaddrlist()
			},
			close() {
				this.show = false
			},
			async getinit() {
				let res = await home.indexlist()
				if (res.data.code == 200) {
					res.data.data.banner.map(t => {
						this.list1.push({
							image: this.URL(t.image),
							link: t.link
						})
					})
					this.list = res.data.data.banner_icon
					this.getnewstype()
				}

			},
			async getnewstype() {
				let res = await home.newstype({
					page: 1,
					page_size: 100
				})
				if (res.data.code == 200) {
					this.tablist = res.data.data.data
					this.type_id = this.tablist[0].id
					this.getnewslist()
				}
			},
			// getaddr() {
			// 	let _this = this
			// 	uni.getLocation({
			// 		type: 'wgs84',
			// 		success: function(res) {
			// 		},
			// 		fail(r) {

			// 		},
			// 		complete(res) {
			// 			if (res.errMsg == 'getLocation:fail network error') {

			// 				_this.iskt = false
			// 				uni.setStorageSync('schoolkt',_this.iskt)
			// 				_this.loading=false
			// 				return
			// 			}
			// 			uni.request({
			// 				url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=WZ3BZ-ULE6F-KLVJ4-NH2D7-NALA2-HTBTW&get_poi=1`,
			// 				success(r) {
			// 					if (r.data.result.address_component.province == r.data.result
			// 						.address_component.city) {
			// 						_this.addrdetial = r.data.result.address_component.province
			// 					} else {
			// 						_this.addrdetial = r.data.result.address_component.province + r
			// 							.data.result.address_component.city
			// 					}
			// 					_this.sf = r.data.result.address_component.province
			// 					_this.city = r.data.result.address_component.city
			// 					_this.checkaddr()
			// 				}
			// 			})
			// 		}
			// 	});
			// },
			checkaddr() {
				let _this = this
				home.checkarea({
					province: _this.sf,
					city: _this.city
				}).then(res => {
					if (res.data.code == 200) {
						_this.iskt = true
						uni.setStorageSync('schoolkt', _this.iskt)
						uni.setStorage({
							key: 'schoolarea',
							data: res.data.data,
							success() {
								_this.getinit()
								_this.getnotice()
							}
						})
					} else {
						_this.iskt = false
					}
					_this.loading = false
				})
			},
			submitcity() {
				let _this = this
				let addrdetial = this.sflist[this.cursf].province + this.sflist[this.cursf].child[this.curcity].city
				uni.setStorageSync('schooladdr', addrdetial)
				this.addrdetial = uni.getStorageSync('schooladdr')
				this.sf = this.sflist[this.cursf].province
				this.city = this.sflist[this.cursf].child[this.curcity].city
				// 获取首页信息
				this.checkaddr()
				this.show = false
			},
			scrolltolower1() {
				if (this.newslist.length == this.total1) {
					return
				}
				this.status = 'loading';
				this.page1++
				this.getnewslist()
			},
			async getnewslist() {
				let res = await home.newslist({
					type_id: this.type_id,
					page_size: this.page_size1,
					page: this.page1
				})
				if (res.data.code == 200) {
					this.newslist = [...this.newslist, ...res.data.data.data]
					this.total1 = res.data.data.pageInfo.total
					if (this.newslist.length == this.total1) this.status = 'nomore';
				}
			},
			async getnotice() {
				let res = await home.sys_list({
					page: 1,
					page_size: 5
				})
				if (res.data.code == 200) {
					res.data.data.data.map(t => {
						this.text1.push(t.title)
					})
				}
			},
			async getaddrlist() {
				let res = await home.admin_area()
				if (res.data.code == 200) {
					this.sflist = res.data.data.data
					let sf = this.sf ? this.sf : ''
					let city = this.city ? this.city : ''
					this.sflist.map((t, i) => {
						if (t.province == sf) {
							this.cursf = i
							t.child.map((t1, i1) => {
								if (t1.city == city) {
									this.curcity = i1
									t1.cur = true
								}
							})
						}
					})
				}
			}
		},
		onShow() {
			this.iskt = uni.getStorageSync('schoolkt')

		}
	}
</script>

<style lang="scss">
	page {
		background: url('https://mp-b54a63ff-3ce2-4df8-8d6e-f855d8976d34.cdn.bspapp.com/img/Rectangle_106.png') 100% no-repeat;
		background-position: top;
		width: 750rpx;
	}

	.top {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 45rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 23rpx;
		color: #000000;
		line-height: 40rpx;

		&__icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 8rpx;
		}
	}

	.con {
		padding: 0 24rpx 24rpx;

		&__not {
			background: #FFFFFF;
			border-radius: 21rpx 21rpx 21rpx 21rpx;
			border: 2rpx solid #EDECEC;
			margin: 10rpx 0;
		}

		&__box {
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(172, 204, 197, 0.5);
			border-radius: 38rpx 38rpx 38rpx 38rpx;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 13rpx;

			&__item {
				padding: 14rpx 0;
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;

				&__icon {
					width: 76rpx;
					height: 76rpx;
					background: #D9D9D9;
					border-radius: 50%;
				}

				&__text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #000000;
					line-height: 40rpx;
				}
			}
		}

		&__box1 {
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(172, 204, 197, 0.5);
			border-radius: 38rpx;
			padding: 20rpx;

			&__tab {
				width: 321rpx;
				height: 153rpx;
				background: linear-gradient(88deg, #8DB2FF 0%, #C7DBFF 100%);
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				position: relative;

				&__name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;
					line-height: 42rpx;
					padding: 22rpx 0 0 26rpx;
				}

				&__tip {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #FFFFFF;
					line-height: 27rpx;
					padding-left: 26rpx;
					opacity: 0.5;
				}

				&__more {
					width: 26.72rpx;
					height: 26.72rpx;
					margin-top: 11rpx;
					margin-left: 26rpx;
				}

				&__bg {
					width: 152.67rpx;
					height: 133.59rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}

			&__title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 31rpx;
				color: #000000;
				line-height: 40rpx;
				margin: 30rpx 0 20rpx;
			}

			&__sx {
				width: fit-content;
				padding: 0 20rpx;
				flex-shrink: 0;
				height: 34rpx;
				background: #FFFFFF;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				border: 2rpx solid #93B8F9;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 23rpx;
				color: #93B8F9;
				line-height: 40rpx;
				margin-bottom: 17rpx;
				margin-right: 24rpx;
			}

			.active {
				// width: 134rpx;
				height: 38rpx;
				background: #84B1FF;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				color: #fff;
				font-size: 28rpx;
			}

			&__list {
				&__item {
					background: #FFFFFF;
					box-shadow: 0rpx 2rpx 8rpx 4rpx #DEE2FF;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
					padding: 15rpx 19rpx 11rpx 30rpx;
					margin-bottom: 12rpx;

					&__text {
						width: 468rpx;
						height: 73rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 27rpx;
						color: #000000;
						line-height: 32rpx;
					}

					&__time {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 19rpx;
						color: #C0BEBE;
						line-height: 40rpx;
						flex: 1;
					}

					&__eye {
						width: 24.81rpx;
						height: 19.08rpx;
						margin-right: 9rpx;
					}

					&__num {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 19rpx;
						color: #C0BEBE;
						line-height: 40rpx;
						padding-right: 18rpx;
					}

					&__pic {
						width: 134rpx;
						height: 103rpx;
						background: #D9D9D9;
						border-radius: 11rpx 11rpx 11rpx 11rpx;
						margin-left: 3rpx;
					}
				}
			}
		}
	}

	.popbox {
		background: linear-gradient(180deg, #F3F9FF 0%, #D9EDFF 100%);
		border-radius: 57rpx 57rpx 0 0;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(102, 141, 133, 0.25);
		padding-bottom: 40rpx;
		max-height: 60%;

		&__title {
			text-align: center;
			padding: 55rpx 0 62rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #000000;
			line-height: 40rpx;
		}

		&__title1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #000000;
			line-height: 40rpx;
			padding-left: 62rpx;
			margin-bottom: 32rpx;
		}

		&__item {
			padding: 0 42rpx;
			height: 69rpx;
			background: #FFFCFC;
			border-radius: 23rpx 23rpx 23rpx 23rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
			line-height: 68rpx;
			margin-bottom: 13rpx;
			width: fit-content;
			margin-left: 40rpx;
		}

		&__list {
			padding: 0 62rpx 0 26rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}

		.active {
			background: #8DB2FF;
			color: #fff;
		}
	}
</style>